<template>
  <!-- 自定义确认弹窗样式 -->
  <el-dialog
    v-if="isShow"
    v-el-drag-dialog
    :title="content.title"
    :visible="isShow"
    :before-close="onBeforeClose"
    append-to-body
    :destroy-on-close="false"
    :close-on-click-modal="false"
    v-bind="content.attributes"
  >
    <component :is="content.component" ref="component" :solt-item="content.formData" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">
        取 消
      </el-button>
      <el-button type="primary" @click="onSubmit()">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'BaseModal',
  directives: {
    elDragDialog
  },
  data() {
    return {
      // 弹窗内容
      isShow: true,

      content: {
        title: '提示',
        formData: {},
        attributes: {
        } // attributes就是element-ui input 里面的属性 dialog Attributes
      }

    }
  },
  methods: {
    close() {

    },
    onSubmit() {
      this.$refs.component.submitForm().then(res => {
        // console.log('onSubmit', res)
        this.ok(res)
      }).catch(err => {
        console.log('onSubmit-error', err)
      })
    },

    ok(value) {
    },

    onBeforeClose() {
      this.isShow = false
    }
  }
}
</script>

<style>
</style>
